:root {
  --bg: #0b0f14;
  --card: #121823;
  --text: #e7eef7;
  --muted: #9fb3c8;
  --accent: #17c964;
  --danger: #f31260;
  --warn: #f5a524;
  --shadow: rgba(0,0,0,0.2);
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial;
  background: var(--bg);
  color: var(--text);
}
.container {
  max-width: 900px;
  margin: 0 auto;
  padding: 16px;
}
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.brand img {
  width: 36px; height: 36px;
}
.badge {
  font-size: 12px;
  color: var(--bg);
  background: var(--accent);
  padding: 4px 10px;
  border-radius: 999px;
  box-shadow: 0 6px 16px var(--shadow);
}
.card {
  background: var(--card);
  border: 1px solid #1f2a3a;
  box-shadow: 0 10px 30px var(--shadow);
  border-radius: 18px;
  padding: 16px;
  margin-top: 14px;
}
h1 { font-size: 20px; margin: 0; }
h2 { font-size: 16px; margin: 0 0 8px; color: var(--muted); }
.grid { display: grid; gap: 12px; }
@media (min-width: 680px) {
  .grid { grid-template-columns: 1fr 1fr; }
}
.row { display: flex; align-items: center; gap: 12px; }
.kv { display: grid; grid-template-columns: 1fr auto; row-gap: 6px; }
.kv div:first-child { color: var(--muted); }
.big {
  font-size: 44px; line-height: 1.1; font-weight: 800;
}
.btn {
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid #203047;
  background: #0f1520;
  color: var(--text);
  cursor: pointer;
}
.btn.primary {
  background: var(--accent);
  color: #04120a;
  border: none;
}
.btn.warn { background: var(--warn); color: #1a1204; border: none; }
.status { font-size: 12px; color: var(--muted); }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td {
  font-size: 13px;
  padding: 8px 6px;
  border-bottom: 1px dashed #223148;
}
.table th { text-align: left; color: var(--muted); }
.pill { padding: 2px 8px; border-radius: 10px; font-size: 12px; }
.pill.green { background: rgba(23,201,100,0.15); color: #e7eef6; }
.pill.red { background: rgba(243,18,96,0.15); color: #f31260; }
.flash {
  animation: flash 0.7s ease-out;
}
@keyframes flash {
  0% { box-shadow: 0 0 0 0 rgba(23,201,100,0.8); }
  100% { box-shadow: 0 0 0 16px rgba(23,201,100,0); }
}




:root{
  --bg:#0B0F14; --card:#111A22; --muted:#93A3B3; --text:#E7EEF6;
  --primary:#16A34A; --warn:#F59E0B; --danger:#EF4444; --live:#22C55E;
  --stroke:#1E2937; --pill:#0E1620; --shadow:0 8px 24px rgba(0,0,0,.25);
  --radius:16px; --gap:16px;
  --safe-top: env(safe-area-inset-top); --safe-bottom: env(safe-area-inset-bottom);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

.safe-area{padding-top:var(--safe-top); padding-bottom:var(--safe-bottom);}

.appbar{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; background:rgba(11,15,20,.85);
  backdrop-filter:saturate(1.2) blur(10px); border-bottom:1px solid var(--stroke);
}
.brand{display:flex; gap:12px; align-items:center}
.logo{width:32px; height:32px; border-radius:8px}
.titles h1{margin:0; font-size:18px; font-weight:700}
.subtitle{font-size:12px; color:var(--muted)}

.chip{border:1px solid var(--stroke); background:transparent; color:var(--text);
  border-radius:999px; padding:6px 12px; font-size:12px}
.chip[aria-pressed="true"], .chip-live{background:var(--pill); border-color:#244055}
.chip-live{color:#C5F2D5; position:relative; padding-left:18px}
.chip-live::before{content:""; width:8px; height:8px; border-radius:999px;
  background:var(--live); position:absolute; left:8px; top:50%; transform:translate(-50%,-50%)}

.content{padding:16px; display:flex; flex-direction:column; gap:16px; max-width:900px; margin:0 auto}

.card{
  background:var(--card); border:1px solid var(--stroke); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:14px 14px 10px;
}
.card.highlight{border-color:#244055}

.card-head{display:flex; align-items:center; justify-content:space-between; gap:8px}
.card-head h2{margin:0; font-size:16px}
.filters{display:flex; gap:8px}

.pill{
  background:var(--pill); color:#B8C7D8; border-radius:999px; padding:6px 12px; font-size:12px;
}
.pill.green{color:#D1F7E3; background:rgba(22,163,74,.14); border:1px solid rgba(22,163,74,.35)}
.pill.loss{color:#FAD1D1; background:rgba(239,68,68,.10); border:1px solid rgba(239,68,68,.35)}

.entry-grid{
  margin-top:12px; display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
}
.entry-metric{background:#0E1620; border:1px solid #152535; border-radius:12px; padding:10px}
.entry-metric .label{font-size:12px; color:var(--muted)}
.entry-metric .value{font-size:18px; font-weight:700}

.actions{margin-top:12px; display:flex; gap:10px; flex-wrap:wrap}
.btn{
  appearance:none; border:1px solid var(--stroke); background:#0E1620; color:var(--text);
  padding:12px 14px; border-radius:12px; font-weight:600; flex:1
}
.btn-primary{background:var(--primary); border-color:#1d8645}
.btn-warn{background:var(--warn); border-color:#cc840a}
.btn-ghost{background:transparent}

.history{list-style:none; margin:8px 0 0; padding:0; display:flex; flex-direction:column; gap:10px}
.history li{
  display:grid; grid-template-columns: 88px 1fr auto; gap:10px; align-items:center;
  background:#0E1620; border:1px solid #152535; border-radius:12px; padding:10px;
}
.history .time{font-size:12px; color:var(--muted)}
.history .meta{display:flex; gap:6px; flex-wrap:wrap}
.history .meta .chip{font-size:11px; padding:4px 8px}
.history .badge{min-width:70px; text-align:center}
.hint{margin-top:8px; color:var(--muted); font-size:12px; text-align:center}

.bottombar{
  position:sticky; bottom:0; z-index:10; background:rgba(11,15,20,.9);
  backdrop-filter: blur(10px); border-top:1px solid var(--stroke);
  display:flex; gap:8px; padding:8px 12px; justify-content:space-around;
}
.navbtn{flex:1; background:#0E1620; border:1px solid var(--stroke); color:var(--text);
  border-radius:12px; padding:10px 12px; font-weight:600}
.navbtn[aria-current="page"]{outline:2px solid #244055}

#toast{
  position:fixed; left:50%; bottom:calc(64px + var(--safe-bottom));
  transform:translateX(-50%); background:#101822; color:#dfeaf5;
  border:1px solid #24384a; border-radius:12px; padding:12px 16px; box-shadow:var(--shadow);
  opacity:0; pointer-events:none; transition:opacity .25s, transform .25s; z-index:9999;
}
#toast.show{opacity:1; transform:translate(-50%, -6px)}
@media (min-width:700px){
  .entry-grid{grid-template-columns:repeat(3, minmax(0,180px))}
}




/* ================================
   Badges & Chips – visual reforçado
   ================================ */

/* Tokens (cores acessíveis em dark) */
:root {
  --pill-green-bg: #0ea05a;     /* verde vibrante */
  --pill-green-glow: 0 0 0 / 55%;
  --pill-loss-bg:  #c84545;     /* vermelho vibrante */
  --pill-loss-glow: 0 0 0 / 55%;
  --pill-text:      #0a0f14;    /* texto escuro para contraste em fundo claro */
  --chip-bg:        #111923;    /* chips do histórico */
  --chip-border:    #2a3340;
  --chip-text:      #cfe6ff;
}

/* Pílulas padrão (placar e histórico) */
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 6px 14px;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
  font-size: 13px;
  border: 1px solid transparent;
  transition: transform .12s ease, box-shadow .2s ease, filter .2s ease;
  user-select: none;
  will-change: transform, box-shadow, filter;
}

/* Estado GREEN */
.pill.green {
  background: var(--pill-green-bg);
  color: #ffffff;
  border-color: color-mix(in oklab, var(--pill-green-bg) 85%, #ffffff 15%);
  box-shadow:
    0 10px 22px -10px color-mix(in oklab, var(--pill-green-bg) 50%, transparent),
    0 0 0 1px color-mix(in oklab, var(--pill-green-bg) 60%, #000 40%);
}

/* Estado LOSS */
.pill.loss {
  background: var(--pill-loss-bg);
  color: #18090a;
  border-color: color-mix(in oklab, var(--pill-loss-bg) 85%, #ffffff 15%);
  box-shadow:
    0 10px 22px -10px color-mix(in oklab, var(--pill-loss-bg) 50%, transparent),
    0 0 0 1px color-mix(in oklab, var(--pill-loss-bg) 60%, #000 40%);
}

/* micro-interação ao tocar/clicar */
.pill:active {
  transform: translateY(1px) scale(.98);
  filter: brightness(.98);
}

/* Chips informativos (Apos, Cash, Vela) */
.chip {
  display: inline-flex;
  align-items: center;
  gap: .5ch;
  background: var(--chip-bg);
  color: var(--chip-text);
  border: 1px solid var(--chip-border);
  border-radius: 999px;
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
}

/* Linha do histórico – reforço de contraste/legibilidade */
.history[data-table="historico"] li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 14px 14px;
  margin: 8px 0;
  background: #0b1017;
  border: 1px solid #1b2430;
  border-radius: 16px;
  box-shadow: 0 6px 18px -12px rgba(0,0,0,.6);
}

.history[data-table="historico"] .time {
  font-variant-numeric: tabular-nums;
  color: #9fb4cc;
  font-weight: 600;
  min-width: 72px;
}

/* Compactação automática no mobile */
@media (max-width: 480px) {
  .history[data-table="historico"] li {
    grid-template-columns: 1fr auto;   /* hora sobe para a primeira coluna */
    grid-template-areas:
      "time badge"
      "meta meta";
  }
  .history[data-table="historico"] .time { grid-area: time; }
  .history[data-table="historico"] .meta { grid-area: meta; margin-top: 6px; }
}

/* Acessibilidade: foco bem visível nos itens navegáveis */
button:focus-visible, .pill:focus-visible, .chip:focus-visible {
  outline: 2px solid #72b6ff;
  outline-offset: 2px;
  box-shadow:
    0 0 0 3px rgba(114,182,255,.15),
    0 0 0 1px rgba(114,182,255,.45);
}

/* Respeita usuários que preferem menos motion */
@media (prefers-reduced-motion: reduce) {
  .pill, .chip {
    transition: none !important;
  }
}

/* Suporte claro (se usar tema claro em algum momento) */
@media (prefers-color-scheme: light) {
  :root {
    --chip-bg: #f3f6fb;
    --chip-border: #dbe4f0;
    --chip-text: #0b1730;
  }
  .history[data-table="historico"] li {
    background: #ffffff;
    border-color: #e5edf6;
    box-shadow: 0 6px 18px -14px rgba(0,0,0,.25);
  }
  .history[data-table="historico"] .time { color: #4e6075; }
}


/* ===== Tutorial + CTA Push ===== */
.tutorial-wrap{
  margin: 18px auto 24px;
  padding: 0 12px;
  max-width: 860px;
}

.cta-push{
  position: sticky;               /* gruda no topo ao rolar */
  top: 12px;
  z-index: 30;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border-radius: 14px;
  background: linear-gradient(180deg,#13202d,#0e1721);
  border: 1px solid #203243;
  box-shadow: 0 12px 30px -20px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.02);
}

.cta-icon{
  font-size: 22px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.25));
}

.cta-text{
  line-height: 1.25;
}
.cta-text strong{ color:#e6f3ff; display:block; font-size:15px; }
.cta-text span{ color:#a9bed4; font-size:13px; }

.cta-btn{ white-space: nowrap; }

/* Moldura do vídeo */
.video-frame{
  margin-top: 12px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid #1b2a3a;
  background: #0b1017;
  box-shadow: 0 10px 28px -16px rgba(0,0,0,.65);
}
.tutorial-video{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio: 16 / 9;           /* mantém 16:9 no mobile */
  background:#000;
}

.tutorial-caption{
  margin: 10px 2px 0;
  color:#89a6c1;
  font-size: 13px;
  text-align:center;
}

/* Reduz movimentos para quem prefere */
@media (prefers-reduced-motion: reduce){
  .tutorial-video{ animation:none; }
}


#velas { display:flex; gap:3px; padding:0; margin:0; list-style:none; }
#velas .vela-pill {
  background:#14202b; color:#d6e3f0; padding:6px 8px;
  border-radius:12px; font-variant-numeric: tabular-nums; font-size:13px;
}


/* Container das velas */
[data-velas] {
  display: flex;
  gap: 10px;
  overflow: hidden;   /* nada de scroll horizontal visível */
  max-width: 100%;
  padding: 8px 0;
  align-items: center;
  flex-wrap: nowrap;  /* uma linha só */
}

/* Cada chip de vela */
[data-velas] .chip.vela {
  flex: 0 0 auto;         /* não encolher nem quebrar */
  white-space: nowrap;    /* “12.34x” sempre inteiro */
}


/* Título/label do bloco de velas */
.velas-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.1rem;
}

/* Badge "analisando" */
.analisando {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 9999px;
  background: rgba(80, 160, 255, 0.10);
  border: 1px solid rgba(80,160,255,0.25);
  color: #bcd7ff;            /* ajuste se quiser */
}

/* bolinha de "ping" */
.analisando .ping {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: #4cc9f0;
  position: relative;
}
.analisando .ping::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: #4cc9f0;
  opacity: .6;
  animation: ping 1.2s ease-out infinite;
}

@keyframes ping {
  0%   { transform: scale(.9); opacity: .6; }
  70%  { transform: scale(2.5); opacity: 0; }
  100% { transform: scale(2.5); opacity: 0; }
}

/* três pontinhos que “respiram” */
.analisando .dots {
  display: inline-flex;
  gap: 4px;
  margin-left: 2px;
}
.analisando .dots i {
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: #9cc6ff;
  opacity: .25;
  animation: dotBlink 1.2s infinite;
}
.analisando .dots i:nth-child(2) { animation-delay: .2s; }
.analisando .dots i:nth-child(3) { animation-delay: .4s; }

@keyframes dotBlink {
  0%, 60%, 100% { opacity: .25; transform: translateY(0); }
  30%          { opacity: 1;   transform: translateY(-2px); }
}

/* utilitário pra esconder quando terminar */
.is-hidden { display: none !important; }

/* (opcional) container das velas – já garantindo que nada vaze */
[data-velas] {
  display: flex; gap: 10px; overflow: hidden;
  align-items: center; flex-wrap: nowrap; max-width: 100%;
}
[data-velas] .chip.vela { flex: 0 0 auto; white-space: nowrap; }


/* estilo base das velas */
.vela-pill {
  padding: 4px 10px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.9rem;
  display: inline-block;
  margin-right: 6px;
}

/* vela vermelha (menor que 2.00x) */
.vela-pill.red {
  background: #2b0f0f;
  color: #ff5c5c;
}

/* vela verde (maior ou igual a 2.00x) */
.vela-pill.green {
  background: #0f2b1a;
  color: #36d27a;
}


/* ===== Forçar tema dark SEMPRE ===== */
:root { 
  /* informa ao navegador que o site é dark (scrollbars, inputs, etc.) */
  color-scheme: dark; 
}

/* Ignora qualquer override quando o SO estiver em modo claro */
@media (prefers-color-scheme: light) {
  :root, body {
    color-scheme: dark;
    background: var(--bg);
    color: var(--text);
  }
  /* Reforça cores escuras onde ficavam brancas */
  .chip {
    background: #111923;
    border: 1px solid #2a3340;
    color: #cfe6ff;
  }
  .history[data-table="historico"] li {
    background: #0b1017;
    border-color: #1b2430;
    box-shadow: 0 6px 18px -12px rgba(0,0,0,.6);
  }
}

[data-field="placar"].green {
  background-color: #0ea05a; /* verde */
  color: #ffffff;
}

[data-field="placar"].loss {
  background-color: #c84545; /* vermelho */
  color: #0a0f14;
}

/* global */
html, body, * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
/* permitir em inputs/áreas de texto */
input, textarea, [contenteditable="true"] { -webkit-user-select: text; user-select: text; }